<template>
  <views >
   <div class="enterprise_office_personlist">
     <div class="enterprise_office_personlist_1">
          <viewTitle :title="'人员签约记录'" :border="true"> </viewTitle>
          <div class="uploading_list">
              <div class="flex">
              <el-button slot="trigger" type="primary">选取文件</el-button>
             
                    <el-button style="margin-left: 10px;"  type="success" @click="submitUpload">上传到服务器</el-button>
                    <el-button>批量导入模板下载</el-button>
              </div>
              <div slot="tip" class="el-upload__tip">上传文件只能是 xls/xlsx 格式，且不超过500kb</div>
          </div>
     </div>
    <el-table :data="tableData" border style="width: 500px">
      <el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="province" label="省份" width="120"></el-table-column>
      <el-table-column prop="city" label="市区" width="120"></el-table-column>
      <el-table-column prop="address" label="地址" width="300"></el-table-column>
      <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  </views>
</template>


<script>
export default {
  name: "records",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333
        }
      ],
       fileList: []
    };
  },
  methods:{
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList,'mmmmmmmmmmmm');
      },
      handlePreview(file) {
        console.log(file,'sssssssssssssssss');
      },
      //  上传前
      beforeAvatarUpload(file){

      },
      //  文件发生变化监听
      onFileChange(file){
            const Xls = file.name.split('.');
            const isLt2M = file.size / 1024 / 1024 < 10;;
            if(Xls[1] === 'xls'|| Xls[1] === 'xlsx'){
                return file;
            }else{
                this.$message.error('上传文件只能是 xls/xlsx 格式')
                return [];
            }
            if(!isLt2M){
                this.$message.error('上传模板大小不能超过 10MB')
                return [];
            }
      }
  }
};
</script>



<style lang="less" :scope="true">
.enterprise_office_personlist{
  padding: 0px;
  .enterprise_office_personlist_1{
    background: #ffffff;
    padding: 20px;
  }
  .uploading_list{
      background: #ffffff;
      display: flex;
      flex-direction: column;
      height: auto;
      margin: 25px  10px  10px 10px;
  }
}
</style>